<template>
    <div class="iframe">
        <div class="i-title">
            <h3>动态组件</h3>
        </div>
        <div class="i-tip">
            <el-button @click="change">默认模板</el-button>
            <el-button @click="change2">其他模板</el-button>
        </div>
        <div class="i-tip">
            <component :is="pstu.def"></component>
        </div>
        <div class="i-tip">
            <keep-alive>
                <component :is="pstu.def"></component>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import { reactive } from "vue";
import TaaComp from "./TaaComp.vue"
import TbbComp from "./TbbComp.vue"
export default {
    components: {
        TaaComp,
        TbbComp
    },
    setup() {
        let pstu = reactive({
            def: "TaaComp"
        })
        function change() {
            pstu.def = "TaaComp";
        }
        function change2() {
            pstu.def = "TbbComp";
        }
        return {
            pstu,
            change,
            change2
        }
    }
}
</script>
